<template>
  <div class="self-introduction">
    <el-image :src="require('@/assets/Author/caster.png')" />
    <h4>Altria</h4>
    <h5>撞响钟声，孤独巡礼</h5>
    <el-collapse>
      <el-collapse-item>
        <template v-slot:title>
          <div class="title">踏足黄昏之岛</div>
        </template>
        <i>聆听乐园之声</i>
      </el-collapse-item>
      <el-collapse-item>
        <template v-slot:title>
          <div class="title">钟声回荡天际</div>
        </template>
        <i>巡礼不负其名</i>
      </el-collapse-item>
      <el-collapse-item>
        <template v-slot:title>
          <div class="title">星辰诞生之刻</div>
        </template>
        <i>圣剑重铸之时</i>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>

export default {
  name: 'SelfIntroduction',
}
</script>

<style scoped>
  .self-introduction {
    width: 300px;
    min-width: 200px;
    text-align: center;
  }
  h4, h5 {
    padding: 5px 0;
  }
  h4 {
    color: #409EFF;
  }
  .title {
    margin-left: auto;
    text-align: center;
  }
  i {
    font-size: 12px;
    cursor: pointer;
  }
</style>